<template>
  <div>
    <!-- 新增,编辑按钮 -->
    <el-form ref="form" :model="articleTime" :rules="roleRules" label-width="100px">
      <el-form-item label="文章标题 :" prop="title">
        <el-input v-model="articleTime.title" />
      </el-form-item>

      <el-form-item label="文章内容 :" prop="articleBody">
        <quillEditor v-model="articleTime.articleBody" />
      </el-form-item>

      <el-form-item label="视频地址 :" prop="videoURL">
        <el-input v-model="articleTime.videoURL" />
      </el-form-item>

      <el-form-item class="onloFn">
        <el-button type="primary" @click="roleSubmit">确定</el-button>
        <el-button @click="cancleRoles">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/articles' // 导入列表API

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'Rich',
  components: {
    quillEditor
  },

  props: {
    isEdit: {
      type: Boolean,
      required: true
    },
    uid: {
      type: [String, Number],
      required: true
    }

  },
  data() {
    return {
      // 文章添加
      articleTime: {
        title: '', // 标题
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      },
      // 添加角色验证
      roleRules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },

  async created() {
    const res = await detail(this.uid)
    this.articleTime = res.data
  },

  methods: {

    // 取消添加按钮
    cancleRoles() {
      this.$emit('writeOff')
    },

    // 确定按钮
    async roleSubmit() {
      // 修改
      if (this.isEdit === true) {
        await update(this.articleTime)
        // console.log(res)
        this.$message.success('数据已修改')
      } else {
        await add({ ...this.articleTime })
        this.$message.success('数据已添加')

        // console.log(res)
      }

      this.$emit('close')
    }

  }
}
</script>

<style>

</style>
